/* eslint-disable vue/no-dupe-keys */
<template>
    <van-pull-refresh v-model="isLoading"
                      @refresh="onRefresh">
        <div class="banner"
             ref="scroll">
            <van-tabs v-model="activeName"
                      @click="onClick"
                      color="#37CD87"
                      title-active-color="#37CD87">
                <van-tab title="乌金猪">
                    <van-list class="help-son"
                              v-model="loading"
                              :finished="finished"
                              finished-text="没有更多了"
                              @load="onLoad">
                        <div class="hello-4"
                             v-for="(itemlist, index) in Piglist"
                             :key="index"
                             :class="[itemlist.id != 0 ? 'gray' : '']"
                             @click="showDetails(itemlist.id)">
                            <div class="hello-4-top"
                                 :class="[itemlist.id != 0 ? 'onlygray' : '']">
                                <div class="hello-4-top-left">
                                    <img :src="itemlist.imgSrc"
                                         alt />
                                </div>
                                <div class="hello-4-top-right">
                                    <p class="pig"
                                       :class="[itemlist.id != 0 ? 'gray' : '']">
                                        {{ itemlist.Pig }}
                                    </p>
                                    <div class="secend">
                                        <van-tag class="date">{{ itemlist.Date }}</van-tag>
                                        <van-tag class="recive"
                                                 color="#FFBA68"
                                                 :class="[itemlist.stock != 0 ? '' : 'gray']"
                                                 v-if="itemlist.bonus_type == 1">认养
                                        </van-tag>
                                        <van-tag class="recive"
                                                 color="#FFBA68"
                                                 :class="[itemlist.stock != 0 ? '' : 'gray']"
                                                 v-else-if="itemlist.bonus_type == 2">产品</van-tag>

                                        <van-tag class="recive"
                                                 color="#FFBA68"
                                                 :class="[itemlist.stock != 0 ? '' : 'gray']"
                                                 v-else>认养</van-tag>
                                    </div>
                                </div>
                                <div class="hello-4-top-last"
                                     :class="[itemlist.id != 0 ? '' : 'close']">
                                    <img :src="itemlist.imgSrcover"
                                         alt />
                                </div>
                            </div>
                            <div class="hello-4-bottom">
                                <div class="show-one">
                                    <div class="show-one-1">
                                        <h4>{{ itemlist.Percentage }}</h4>
                                        <p class="color-2">认养分红</p>
                                    </div>
                                    <div class="show-one-2">
                                        <h4>{{ itemlist.Money }}</h4>
                                        <p class="color-2 adddistance">金额(元/头)</p>
                                    </div>
                                    <div class="show-one-3">
                                        <h4 id="show-num">{{ itemlist.Month }}</h4>
                                        <p class="color-2">期限(月)</p>
                                    </div>
                                </div>
                                <div class="length">
                                    <van-progress color="#75DEA7"
                                                  :percentage="itemlist.Schedule"
                                                  style="height: 0.213rem;" />
                                </div>
                            </div>
                        </div>
                        <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
                    </van-list>
                </van-tab>
            </van-tabs>

            <Tab-Bar :logeid="num"></Tab-Bar>
        </div>
    </van-pull-refresh>
</template>

<script>
import TabBar from "./TabBar.vue";
export default {
    components: {
        TabBar
    },
    data() {
        return {
            num: 1,
            isLoading: false,
            loading: false,
            finished: false,
            active: 0,
            activeName: "a",
            Piglist: [
                // {
                //   id: 0,
                //   Pig: "乌金猪",
                //   Date: "第1期",
                //   Way: "认养",
                //   Percentage: "36.00%",
                //   Money: "5100.00",
                //   Month: "8",
                //   Schedule: 74,
                //   imgSrc: require("../assets/images/a11.jpg"),
                //   imgSrcover: require("../assets/images/a13.png")
                // },
                // {
                //   id: 1,
                //   Pig: "乌金猪",
                //   Date: "第2期",
                //   Way: "认养",
                //   Percentage: "36.00%",
                //   Money: "5000.00",
                //   Month: "8",
                //   Schedule: 100,
                //   imgSrc: require("../assets/images/a11.jpg"),
                //   imgSrcover: require("../assets/images/a13.png")
                // },
                // {
                //   id: 3,
                //   Pig: "乌金猪",
                //   Date: "第2期",
                //   Way: "认养",
                //   Percentage: "36.00%",
                //   Money: "5000.00",
                //   Month: "8",
                //   Schedule: 100,
                //   imgSrc: require("../assets/images/a11.jpg"),
                //   imgSrcover: require("../assets/images/a13.png")
                // }
            ]
        };
    },

    mounted() {
        // 上拉加载
        window.addEventListener("scroll", this.onScroll);

        //初始化页面自执行轻提示框
        this.addtoast();
    },

    created() {
        // eslint-disable-next-line no-unused-vars
        let Urlimg = "http://yyl.kmmyxb.cn/pic/";
        // eslint-disable-next-line no-unused-vars
        let params2 = {
            limit: "10",
            page: "1",
            cate_code: "13761837",
            title: ""
        };
        // this.RequestApi("api/getproductlist", params2, this.Piglist, Urlimg);

        this.MockRequestApi("api/pigList", "", this.Piglist, "");
    },

    methods: {
        //切换标签栏
        // onClick(name, title) {
        //   console.log(title);
        // },

        //*******/请求模拟数据
        //MockRequestApi  模拟数据接口
        // eslint-disable-next-line no-unused-vars
        MockRequestApi(Url, Params, PiglistName, Urlimg) {
            this.$https.fetchGet(Url, Params)
                .then(res => {
                    //console.log(res);
                    let newData = res.data.data;
                    switch (newData.code) {
                        case 1001:
                            console.log("查询成功!");
                            console.log(newData.result);

                            for (let i = 0; i < newData.result.length; i++) {
                                console.log(newData.result[0]);
                                if (i == 3) {
                                    for (let j = 0; j < newData.result[i].Piglist.length; j++) {
                                        let Piglist = newData.result[i].Piglist;
                                        PiglistName.push({
                                            id: Piglist[j].id,
                                            Pig: Piglist[j].Pig,
                                            Date: Piglist[j].Date,
                                            Way: Piglist[j].Way,
                                            Percentage: Piglist[j].Percentage,
                                            Money: Piglist[j].Money,
                                            Month: Piglist[j].Month,
                                            Schedule: Piglist[j].Schedule,
                                            imgSrc: require("../assets/images/" +
                                                Piglist[j].imgSrc +
                                                ".jpg"),
                                            imgSrcover: require("../assets/images/" +
                                                Piglist[j].imgSrcover +
                                                ".png")
                                        });
                                    }
                                }
                            }

                            break;
                        case 1002:
                            console.log("查询失败1!");
                            break;
                        default:
                            console.log("错误1!");
                            break;
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },

        //请求数据接口封装
        // RequestApi(Url, Params, Name, Urlimg) {
        //   https
        //     .fetchGet(Url, Params)
        //     .then(res => {
        //       console.log(res.data.code);
        //       let newData = res.data;

        //       switch (newData.code) {
        //         case 1001:
        //           console.log("查询成功!");
        //           switch (newData.result) {
        //             case newData.result:
        //               console.log("数据存在!");

        //               if (Name == this.Piglist) {
        //                 for (let i = 0; i < newData.result.data.length; i++) {
        //                   this.Piglist.push({
        //                     id: 0,
        //                     Pig: newData.result.data[0].title,
        //                     Date: "第" + newData.result.data[0].num_per + "期",
        //                     Way: newData.result.data[0].unit,
        //                     Percentage:
        //                       newData.result.data[0].forecast_year_bonus + "%",
        //                     Money: newData.result.data[0].price,
        //                     Month: newData.result.data[0].term,
        //                     imgSrc: Urlimg + newData.result.data[0].picture,
        //                     more_picture:
        //                       Urlimg + newData.result.data[0].more_picture,
        //                     Schedule: 96,

        //                     cash_bonus_bl: newData.result.data[0].cash_bonus_bl,
        //                     product_bonus_bl: newData.result.data[0].title,
        //                     cash_product_bonus_bl:
        //                       newData.result.data[0].cash_product_bonus_bl,
        //                     stock: newData.result.data[0].stock,
        //                     unit: newData.result.data[0].unit,
        //                     bonus_type: newData.result.data[0].bonus_type
        //                   });
        //                   this.Piglist.push({
        //                     id: 0,
        //                     Pig: newData.result.data[0].title,
        //                     Date: "第" + newData.result.data[0].num_per + "期",
        //                     Way: newData.result.data[0].unit,
        //                     Percentage:
        //                       newData.result.data[0].forecast_year_bonus + "%",
        //                     Money: newData.result.data[0].price,
        //                     Month: newData.result.data[0].term,
        //                     imgSrc: Urlimg + newData.result.data[0].picture,
        //                     more_picture:
        //                       Urlimg + newData.result.data[0].more_picture,
        //                     Schedule: 96,

        //                     cash_bonus_bl: newData.result.data[0].cash_bonus_bl,
        //                     product_bonus_bl: newData.result.data[0].title,
        //                     cash_product_bonus_bl:
        //                       newData.result.data[0].cash_product_bonus_bl,
        //                     stock: newData.result.data[0].stock,
        //                     unit: newData.result.data[0].unit,
        //                     bonus_type: newData.result.data[0].bonus_type
        //                   });
        //                 }
        //                 console.log(this.Piglist);
        //               }

        //               break;
        //             default:
        //               console.log("错误!");
        //               break;
        //           }
        //           break;
        //         case 1002:
        //           console.log("查询失败1!");
        //           break;
        //         default:
        //           console.log("错误1!");
        //           break;
        //       }
        //     })
        //     .catch(err => {
        //       console.log(err);
        //     });
        // },

        //vant 加载列表方法
        onLoad() {
            // 异步更新数据
            setTimeout(() => {
                for (let i = 0; i < 1; i++) {
                    // this.Piglist.push(this.Piglist.length + 1);
                }
                // 加载状态结束
                this.loading = false;

                // 数据全部加载完成
                if (this.Piglist.length > 0) {
                    this.finished = true;
                }
            }, 500);
        },

        // eslint-disable-next-line no-unused-vars
        onClick(name, title) {
            this.goods();
        },
        //获取商品接口 上拉加载
        // eslint-disable-next-line no-undef
        goods: _throttle(function () {
            this.Piglist.length = 0;

            // eslint-disable-next-line no-unused-vars
            let Urlimg = "http://yyl.kmmyxb.cn/pic/";

            // eslint-disable-next-line no-unused-vars
            let params2 = {
                limit: "10",
                page: "1",
                cate_code: "13761837",
                title: ""
            };
            //("api/getproductlist", params2, this.Piglist, Urlimg);
        }, 200),
        //上拉加载
        onRefresh() {
            // this.$toast.loading({
            //   message: "加载中...",
            //   duration: 30000
            // });
            setTimeout(() => {
                // this.$toast("刷新成功");
                this.isLoading = false;
                this.count++;
                this.goods();
            }, 500);
        },

        onScroll() {
            //可滚动容器的高度
            this.LastTime();
        },

        showDetails(id) {
            if (id == 0) {
                this.$router.push({ path: "/PigDetails" });
            }
        },

        addtoast() {
            const toast = this.$toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
                message: "加载中..."
            });

            let second = 1;
            const timer = setInterval(() => {
                second--;
                if (second) {
                    toast.message = "加载中...";
                } else {
                    clearInterval(timer);
                    // 手动清除 Toast
                    toast.clear();
                }
            }, 1000);
        },

        //函数防抖 （只执最后一次点击）多用于频繁点击
        // eslint-disable-next-line no-undef
        LastTime: _debounce(function () {
            let innerHeight = this.$refs.scroll.clientHeight;
            //屏幕尺寸高度
            let outerHeight = document.documentElement.clientHeight;
            //可滚动容器超出当前窗口显示范围的高度
            let scrollTop = document.documentElement.scrollTop;
            //scrollTop在页面为滚动时为0，开始滚动后，慢慢增加，滚动到页面底部时，出现innerHeight < (outerHeight + scrollTop)的情况，严格来讲，是接近底部。
            //console.log(innerHeight + " " + outerHeight + " " + scrollTop);
            if (innerHeight <= outerHeight + scrollTop) {
                //加载更多操作
                // eslint-disable-next-line no-unused-vars
                let params2 = {
                    limit: "10",
                    page: "1",
                    cate_code: "13761837",
                    title: ""
                };
                // eslint-disable-next-line no-unused-vars
                let Urlimg = "http://yyl.kmmyxb.cn/pic/";

                this.Piglist.length = 0;
                console.log(this.Piglist);
                //this.RequestApi("api/getproductlist", params2, this.Piglist, Urlimg);

                if (this.Piglist.length > 0) {
                    this.finished = true;
                }
            }
        }, 200)
    }
};
</script>

<style scoped>
* {
    padding: 0;
    margin: 0;
}
body {
    background-color: #f6f6f6;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    display: block;
}
div {
    display: block;
    box-sizing: border-box;
}
.banner {
    width: 100%;
    height: 100%;
}
.van-tabs__line {
    background-color: #37cd87;
}

.help-son {
    padding: 10px 10px 0 10px;
}
.hello-4 {
    height: 181.25px;
    border-radius: 10px;
    overflow: hidden;

    background: #ffffff;
    margin-bottom: 10px;
}
.hello-4-top {
    padding-top: 10px;
    padding-left: 10px;
    width: 100%;
    height: 80px;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 3%;
}

.hello-4-top-left {
    width: 58px;
    height: 58px;
}
.hello-4-top-left img {
    width: 58px;
    height: 58px;
}

.hello-4-top-right {
    width: 106.69px;
    height: 60px;
    text-align: left;
    padding-left: 12px;
}

.hello-4-top-last {
    width: 58px;
    height: 58px;
    margin-left: 105px;
}
.hello-4-top-last img {
    width: 58px;
    height: 58px;
}

.pig {
    width: 100%;
    font-size: 16px;
    color: #333;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.secend {
    display: flex;
    padding-top: 10px;
}
.date {
    width: 36.69px;
    height: 20px;
    text-align: center;
    padding-left: 5px;
    background-color: rgb(233, 92, 111);
    color: #fff;
    margin-right: 10px;
}
.recive {
    width: 30px;
    height: 20px;
    text-align: center;
    padding-left: 5px;
    margin-right: 10px;
    color: #fff;
    background-color: #fff;
}

.hello-4-bottom {
    width: 100%;
    padding: 3%;
}
.show-one {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
h4 {
    color: #e95c6f;
    font-size: 18px;
}
.color-2 {
    color: #8a8a8a;
}
.adddistance {
    text-align: center;
    width: 100%;
}
.show-one-1 {
    width: 33.33%;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    text-align: left;
}
.show-one-2 {
    width: 33.33%;
    display: flex;
    flex-flow: row wrap;
    text-align: center;
    justify-content: flex-start;
}
.show-one-3 {
    width: 33.33%;
    display: flex;
    flex-flow: row wrap;
    text-align: center;
    padding-left: 65px;
    justify-content: flex-start;
}
h4 {
    color: #e95c6f;
    font-size: 16px;
    margin-bottom: 5px;
    clear: both;
    width: 100%;
    display: block;
    font-weight: bold;
}

.length {
    width: 100%;
    height: 40px;
    padding-top: 20px;
}
.hello-5 {
    display: flex;
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 60px;
    margin: auto;
    background: #fff;
}
.hello-5-all {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}
.hello-5-bottom {
    width: 20%;
    display: flex;
}

.Size {
    width: 25.984px;
    height: 25.984px;
}

.gray {
    color: gray;
    filter: grayscale(100%);
    opacity: 0.5;
}
.onlygray {
    color: gray;
}
.close {
    display: none;
}
</style>
